


<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="增加动态页面">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
 <el-col :span="22">
     <el-form-item label="页面标识" size="mini" prop="dynamicPage">
             <el-select style="width: 100%;"  v-model="form.dynamicPage" filterable clearable
                     placeholder="请选择">
                 <el-option v-for="item in dynamicPageOptions" :key="item.id"
                         :label="item.name" :value="item.id">
                 </el-option>
             </el-select>
     </el-form-item>
      
 </el-col>
 <el-col :span="22">
     <el-form-item label="组件" size="mini" prop="component">
             <el-select style="width: 100%;"  v-model="form.component" filterable clearable
                     placeholder="请选择">
                 <el-option v-for="item in componentOptions" :key="item.id"
                         :label="item.name" :value="item.id">
                 </el-option>
             </el-select>
     </el-form-item>
      
 </el-col>
 <el-col :span="22">
     <el-form-item label="排序号" size="mini" prop="sortNum">
            <el-input-number v-model="form.sortNum" name="sortNum" type="textarea" :min="0" :max="100"></el-input-number>
     </el-form-item>
      
 </el-col>
 <el-col :span="22">
     <el-form-item label="内容" size="mini" prop="data">
             <el-input v-model="form.data" name="data" type="textarea"></el-input>
     </el-form-item>
      
 </el-col>
 <el-col :span="22">
     <el-form-item label="样式" size="mini" prop="style">
             <el-input v-model="form.style" name="style" type="textarea"></el-input>
     </el-form-item>
      
 </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="add">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  var config = {};
  config.methods = {};
  config.mixins = [common];


	config.data = function () {
			return {
				form: {
					dynamicPage: '',
					component: '',
					sortNum: '',
					data: '',
					style: ''				},
            dynamicPageOptions: [],
            componentOptions: [],
				rules: {
                        dynamicPage: [
							          { required: true, message: '请输入页面标识', trigger: 'blur' }
						      ],
                        component: [
							          { required: true, message: '请输入组件', trigger: 'blur' }
						      ],
				}
			}
	};




  config.methods.add = function () {
			var self = this;
			this.$refs["ruleForm"].validate(function(valid){
				if (valid) {
					self.addData();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}

	config.methods.addData = function () {
			var self = this, data = this.form;
			if (this.deforeAddData) {
				this.deforeAddData();
			}
			this.postData("/tenantRest/dynamicpageitem/create.htm", data, function (res) {
				if (res.code == 0) {
					self.$message({
						message: '添加数据成功',
						type: 'success'
					});
					self.$router.go(-1);
				} else {
					self.$message.error(res.msg);
				}
			});
		}


		config.methods.loadDynamicPageOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/dynamicpage/list.htm", param, function (result) {
					if (result.code == 0) {
              self.dynamicPageOptions= result.list;
					}
				});
		}

		config.methods.loadComponentOptions= function(){
				var self=this;
				var param = {};
				param.sortMethod = "asc";
				param.sortField = "id";
				param.level =1;
				param.size =500;
				param.fetch=0;
				this.postData("/tenantRest/component/list.htm", param, function (result) {
					if (result.code == 0) {
              self.componentOptions= result.list;
					}
				});
		}

  
  	config.mounted = function () {
         this.loadDynamicPageOptions();
         this.loadComponentOptions();
		}


  export default config;
</script>

<style scoped>
</style>